
<%@include file="/commons/decelerations.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript">
	$(function() {
		//隱藏First Row
		$('#Button1').click(function() {
			$('tr:first').hide();
		});
		//隱藏last Row
		$('#Button2').click(function() {
			$('tr:last').hide();
		});
		//顯示全部
		$('#Button3').click(function() {
			//顯示所有tr
			$("tr").each(function() {
				$(this).show();
			});
			//顯示所有td
			$("td").each(function() {$(this).show();});
		});
		//隱藏指定Row或Column
		$('td').click(
				function() {
					//var typeindex = $("#type").attr("selectedIndex");  
					var typeindex = $("#type").val();
					var colindex = $(this).parent().children().index($(this));
					var rowindex = $(this).parent().parent().children().index($(this).parent());
					if (typeindex != 0){
						//alert('col:' + colindex);
						$('td:nth-child(' + (colindex + 1) + ')').hide();
						//隱藏column
						//$('td:eq('+colindex+')').hide();
						//隱藏cell 
					}
					else{
						//alert('row:' + rowindex);
						$('tr:eq(' + rowindex + ')').hide(); //隱藏row
					}

				});

	});
</script>

<body>
<div id="content">jQuery自動實現<br /><br />名稱：<input type="text" id="txtSelectName" /> 值：<input type="text" id="txtSelectValue" /></div>
</body>
</html>
</head>
<body>
	<select id="type" style="width:auto">
		<option value="0">hidden row</option>
		<option value="1">hidden column</option>
	</select>
	<input id="Button1" type="button" value="hidden1" />
	<input id="Button2" type="button" value="hidden2" />
	<input id="Button3" type="button" value="show all" />
	<table border="1">
		<tr class="s1">
			<td>Row0 Column0</td>
			<td>Row0 Column1</td>
			<td>Row0 Column2</td>
			<td>Row0 Column3</td>

		</tr>

		<tr class="s1">
			<td>Row1 Column0</td>
			<td>Row1 Column1</td>
			<td>Row1 Column2</td>
			<td>Row1 Column3</td>
		</tr>

		<tr class="s1">
			<td>Row2 Column0</td>
			<td>Row2 Column1</td>
			<td>Row2 Column2</td>
			<td>Row2 Column3</td>
		</tr>

	</table>
</body>
</html>